<template>
  <div>
    <!-- 搜索区域 -->
    <!-- <div class="search_box">
      <el-form ref="searchFormRef" :model="queryInfo" label-width="120px" class="search-box">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item prop="user_name" label="申请人:">
              <el-input size="large" v-model.trim="queryInfo.user_name" placeholder="搜索申请人" :prefix-icon="Search"
                @change="searchTable"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item prop="dates" label="日期范围:">
              <el-date-picker v-model="queryInfo.dates" type="daterange" size="large" start-placeholder="开始日期"
                end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss" @change="changeDate" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item prop="status" label="订单状态:">
              <Select width="240" placeholder="请选择订单状态" v-model="queryInfo.status" :data="payStatusData"
                @change="searchTable" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <div class="flex justify-end align-center">
              <el-button type="info" :icon="RefreshRight" size="large" @click="resetTable">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div> -->

    <!-- 表格区域 -->
    <div class="margin-top">
      <el-table ref="multipleTableRef" :data="listData" style="width: 100%">
        <el-table-column property="产品图片" label="产品图片" width="120">
          <template #default="scope">
            <div class="box">
              <el-image :src="scope.row.goodsData[0].head_img[0]" />
            </div>
          </template>
        </el-table-column>

        <el-table-column label="价格" property="order_money">
          <template #default="scope">
            ¥{{ scope.row.order_money }}
          </template>
        </el-table-column>

        <el-table-column label="创建时间" property="create_time"></el-table-column>

        <el-table-column label="设置名称" property="uname"></el-table-column>

        <el-table-column label="客户备注" property="remark">
          <template #default="scope">
            <el-input type="textarea" placeholder="点击添加备注" v-model="scope.row.remarks"
              @blur="handleSetRemark(scope.row)"></el-input>
          </template>
        </el-table-column>

        <el-table-column label="支付二维码" property="qrcodeUrl">
          <template #default="scope">
            <el-image :src="scope.row.qrcodeUrl" style="width: 120px;height: 120px;"></el-image>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="400">
          <template #default="scope">
            <div class="flex align-center">
              <el-button class="margin-left-xs" size="small" plain type="default"
                @click="handleCopyLink(scope.row)">复制链接</el-button>

              <!-- <el-button class="margin-left-xs" size="small" type="success" plain
                @click="handleOpenDetail(scope.row)">查看详情</el-button> -->

              <el-button class="margin-left-xs" size="small" type="danger" plain
                @click="handleDelect(scope.row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页区域 -->
    <div class="margin-top">
      <Pagination :total="total" @change="changePage" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, toRef, onMounted, watch } from 'vue'
import Select from '@/components/admin/Select.vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router';
import useTableHook from '@/hooks/useTableHook'
import { GetOrderDataListApi, DeleteOrderDataApi, SetOrderRemarksApi } from '@/api/index'
import { Message, RefreshRight } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Pagination from '@/components/admin/Pagination.vue'
import WithdrawalDetailModal from '@/components/admin/finance/WithdrawalDetailModal.vue';

const handleCopyLink = (record) => {
  emit('copy', record.invitePayUrl)
}

const handleDelect = (record) => {
  ElMessageBox.confirm('确认删除', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(async () => {
    try {
      let param = {
        id: record.id,
      }

      const res = await DeleteOrderDataApi(param)

      ElMessage({
        type: 'success',
        message: '删除成功!'
      })

      searchTable()
    } catch (err) {
      ElMessage({
        type: 'error',
        message: '删除失败!'
      })
    }
  })
}



const handleSetRemark = (record) => {
  ElMessageBox.confirm('确认删除?', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(async (res) => {
    try {
      const remarksParam = reactive({
        id: record.id,
        remarks: record.remarks
      })


      const res = await SetOrderRemarksApi(remarksParam)

      ElMessage({
        type: 'success',
        message: 'success!'
      })

      searchTable()
    } catch (error) {
      ElMessage({
        type: 'success',
        message: 'error!'
      })
    }
  })
}

const handleOpenDetail = (link) => {
  emit('view', link)
}

const queryInfo = ref({
  page: 1,
  limit: 10,
  user_name: '',
  start_time: '',
  end_time: '',
  status: ''
})

const searchFormRef = ref()

// 重置表格
const resetTable = () => {
  searchFormRef.value.resetFields()

  queryInfo.value.start_time = ''

  queryInfo.value.end_time = ''

  searchTable()
}

const emit = defineEmits(['copy', 'view'])

onMounted(() => {
  initTable()
})

const {
  total,
  listData,
  searchTable,
  initTable,
  changePage,
} = useTableHook(queryInfo.value, GetOrderDataListApi)
</script>

<style lang="scss">
$primary: #3498db;

/* 头部区域样式 */
/* 页面标题区域 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  background-color: white;
  padding: 20px 24px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.page-header h1 {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  position: relative;
}

.page-header h1::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 40px;
  height: 3px;
  background-color: $primary;
  border-radius: 3px;
}

.btn-create {
  background-color: $primary;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-create:hover {
  background-color: darken($primary, 10%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3);
}

.btn-create::before {
  content: '+';
  font-size: 18px;
  font-weight: 500;
}

.title-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: #2c3e50;
}

.merchant-name {
  color: #e74c3c;
}

.back-link {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: #7f8c8d;
  text-decoration: none;
  transition: color 0.3s;
  margin-top: 5px;
}

.back-link:hover {
  color: #e74c3c;
}

.back-link i {
  margin-right: 5px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.btn-primary {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-weight: 600;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background-color: #c0392b;
}

.btn-primary i {
  margin-right: 5px;
}
</style>
